// 柱状图1
(function () {
    // 实例化对象
    var myChart = echarts.init(document.querySelector('.bar .chart'))
    // 指定配置项
    var option = {
        color: ["#2f89cf"],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: "0%",
            top: "10px",
            right: "2%",
            bottom: "4%",
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ["旅游行业", "教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业"],
                axisLabel: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                },
                axisLine: {
                    show: false,
                    // lineStyle: {
                    //     color: "rgba(255,255,255,.1)",

                    // }
                },
                axisTick: {
                    alignWithLabel: true,
                    lineStyle: {
                        color: "#213ebd"
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",

                    }
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                }
            }
        ],
        series: [
            {
                name: '直接访问',
                type: 'bar',
                barWidth: '35%',
                data: [200, 300, 300, 900, 1500, 1200, 600],
                itemStyle: {
                    barBorderRadius: 5
                }

            }
        ]
    };
    myChart.setOption(option)
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();

// 柱状图2
(function () {
    // 颜色数组
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    var myChart = echarts.init(document.querySelector('.bar2 .chart'))

    var option = {

        grid: {
            top: "10%",
            left: "22%",
            bottom: "10%"
        },
        xAxis: {
            show: false,
        },
        yAxis: [
            {
                type: "category",
                data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
                // 不显示y轴的线
                axisLine: {
                    show: false
                },
                // 不显示刻度
                axisTick: {
                    show: false
                },
                // 把刻度标签里面的文字颜色设置为白色
                axisLabel: {
                    color: "#fff"
                },
                inverse: true,
            },
            {
                show: true,
                data: [702, 350, 610, 793, 664],
                // 不显示y轴的线
                axisLine: {
                    show: false
                },
                // 不显示刻度
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: "#fff"
                    }
                },
                inverse: true,
            }
        ],
        series: [
            {
                type: 'bar',
                data: [70, 34, 60, 78, 69],
                name: "条",
                // 柱子之间的距离
                barCategoryGap: 50,
                //柱子的宽度
                barWidth: 10,
                // 柱子设为圆角
                itemStyle: {
                    barBorderRadius: 20,
                    color: function (params) {
                        // console.log(params);
                        return myColor[params.dataIndex]
                    }
                },
                //柱子的宽度
                label: {
                    show: true,
                    position: "inside",
                    formatter: "{c}%",
                    color: '#fff'
                },
                yAxisIndex: 0,
            },
            {
                name: '框',
                type: 'bar',
                barCategoryGap: 50,
                barWidth: 15,
                data: [100, 100, 100, 100, 100],
                itemStyle: {
                    color: 'none',
                    borderColor: '#00c1de',
                    borderWidth: 3,
                    barBorderRadius: 15

                },
                yAxisIndex: 1,
            },
        ]

    };

    myChart.setOption(option)
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();


// 折线图1
(function () {
    var yearData = [
        {
            year: "2021", // 年份
            data: [
                // 两个数组是因为有两条线
                [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
            ]
        },
        {
            year: "2022", // 年份
            data: [
                // 两个数组是因为有两条线
                [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
                [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
            ]
        }
    ];
    var myChart = echarts.init(document.querySelector('.line .chart'))
    var option = {
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false // 去除刻度线
            },
            boundaryGap: false,
            axisLabel: {
                color: "#458dea",
                fontSize: "12"
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: false
            },

            axisLabel: {
                color: "#458dea",
                fontSize: "12"
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                }
            }
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: true,// 显示边框
            borderColor: '#012f4a',// 边框颜色
            containLabel: true // 包含刻度文字在内
        },
        legend: {
            right: '10%',
            lineStyle: {
                width: '1'
            },
            textStyle: {
                color: "#4c9bfd"
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    type: 'solid'
                }
            },
            backgroundColor: 'rgba(200,200,200,.7)',
            borderColor: 'rgba(200,200,200,.7)',
            textStyle: {
                color: '#fff',
                fontWeight: 'normal',

            }

        },
        color: ['#00f2f1', '#ed3f35'],
        series: [{
            name: '新增粉丝',
            data: yearData[0].data[0],
            type: 'line',
            smooth: true,
            // symbolSize:"15",
        },
        {
            name: '新增游客',
            data: yearData[0].data[1],
            type: 'line',
            smooth: true
        },
        ],
        emphasis: {

        },
        selectedMode: true
    };

    myChart.setOption(option)
    window.addEventListener("resize", function () {
        myChart.resize();
    });

    // 点击切换
    $('.line h2').on('click', 'a', function () {
        // console.log($(this).index());
        var obj = $(this).index();
        option.series[0].data = yearData[obj].data[0]
        option.series[1].data = yearData[obj].data[1]

        myChart.setOption(option)
    })
})();


// 折线图2
(function () {
    var myChart = echarts.init(document.querySelector('.line2 .chart'))

    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                label: {
                    backgroundColor: '#6a7985'
                },
                lineStyle: {
                    type: 'solid'
                }
            }
        },
        legend: {
            top: "0%",
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            },
            itemStyle: {
                color: 'inherit',
                borderWidth: '0'
            }

        },

        grid: {
            left: "10",
            top: "30",
            right: "10",
            bottom: "10",
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"],
                axisLabel: {
                    // color:'#959ec0',
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.2)"
                    }
                },

            },

        ],
        yAxis: [
            {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisTick: {
                    show: false,

                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },
            }
        ],
        series: [
            {
                smooth: true,
                name: '邮件营销',
                type: 'line',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                            },
                            {
                                offset: 0.8,
                                color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                            }
                        ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)"
                },
                emphasis: {
                    focus: 'series'
                },
                lineStyle: {
                    width: '2'
                },
                data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40],
                symbol: 'circle',
                symbolSize: "8",
                showSymbol: false,
                itemStyle: {
                    color: "#0184d5",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12
                }
            },
            {
                smooth: true,
                name: '联盟广告',
                type: 'line',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                            },
                            {
                                offset: 0.8,
                                color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                            }
                        ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)"
                },
                emphasis: {
                    focus: 'series'
                },
                data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20],
                showSymbol: false,
                symbol: 'circle',
                symbolSize: "8",
                itemStyle: {
                    color: "#00d887",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12
                }
            }
        ]
    };

    myChart.setOption(option)
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();

// 饼图1
(function () {
    var myChart = echarts.init(document.querySelector('.pie .chart'))

    var option = {
        tooltip: {
            trigger: 'item',
            textStyle: {
                color: '#fff',
                // fontSize:12
            },
            backgroundColor: 'rgba(0,0,0,0.5)',
            borderColor: 'rgba(0,0,0,0.5)',
            formatter: '{a}<br/> {b} : {c} ({d}%)'
        },
        legend: {
            bottom: '5%',
            left: 'center',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        series: [
            {
                name: '年龄分布',
                type: 'pie',
                radius: ['40%', '60%'],
                center: ['50%', '40%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                emphasis: {
                    scaleSize: 12
                },
                data: [
                    { value: 1, name: "0岁以下" },
                    { value: 4, name: "20-29岁" },
                    { value: 2, name: "30-39岁" },
                    { value: 2, name: "40-49岁" },
                    { value: 1, name: "50岁以上" }
                ],
                color: [
                    "#065aab",
                    "#066eab",
                    "#0682ab",
                    "#0696ab",
                    "#06a0ab",
                ],
            }
        ],
    };

    myChart.setOption(option)
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();


// 饼图2
(function () {
    var myChart = echarts.init(document.querySelector('.pie2 .chart'))

    var option = {
        legend: {
            bottom: '0%',
            left: 'center',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            backgroundColor: 'rgba(0,0,0,0.5)',
            borderColor: 'rgba(0,0,0,0.5)',
            textStyle: {
                color: '#fff'
            },
            formatter: '{a}<br/> {b} : {c}({d}%)'
        },
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#1d9dff'],
        series: [
            {
                name: '面积模式',
                type: 'pie',
                radius: ['10%', '70%'],
                center: ['50%', '40%'],
                roseType: "radius",
                label: {
                    color: '#1d9dff',
                    fontSize: 10,
                    labelLine: {
                        length: 6,
                        length1: 8
                    }
                },
                data: [
                    { value: 20, name: '云南' },
                    { value: 26, name: '北京' },
                    { value: 24, name: '山东' },
                    { value: 25, name: '河北' },
                    { value: 20, name: '江苏' },
                    { value: 25, name: '浙江' },
                    { value: 42, name: '湖北' }
                ]
            }
        ]
    };

    myChart.setOption(option)
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();


// 地图
(function () {
    var myChart = echarts.init(document.querySelector('.map .chart'))

    //数据
    var cyfztx_date_n = {
        geoCoordMap: {
            沈阳: [123.46417, 41.6775],
            中国台湾: [120.96, 23.7],
            中国香港: [114.195466, 22.282751],
            中国澳门: [113.54, 22.2],
            甘肃: [103.73, 36.03],
            四川: [104.06, 30.67],
            河北: [114.48, 38.03],
            湖北: [114.31, 30.52],
            安徽: [117.27, 31.86],
            浙江: [120.19, 30.26],
            湖南: [113, 28.21],
            黑龙江: [126.63, 45.75],
            陕西: [108.95, 34.27],
            北京: [116.46, 39.92],
            上海: [121.48, 31.22],
            重庆: [106.54, 29.59],
            天津: [117.2, 39.13],
        },
        BJData: [
            [{ name: '中国台湾', value: 21 }, { name: '沈阳' }],
            [{ name: '中国香港', value: 101 }, { name: '沈阳' }],
            [{ name: '中国澳门', value: 2 }, { name: '沈阳' }],
            [{ name: '北京', value: 12 }, { name: '沈阳' }],
            [{ name: '上海', value: 1 }, { name: '沈阳' }],
            [{ name: '重庆', value: 1 }, { name: '沈阳' }],
            [{ name: '天津', value: 1 }, { name: '沈阳' }],
            [{ name: '陕西', value: 3 }, { name: '沈阳' }],
            [{ name: '甘肃', value: 4 }, { name: '沈阳' }],
            [{ name: '四川', value: 1 }, { name: '沈阳' }],
            [{ name: '河北', value: 6 }, { name: '沈阳' }],
            [{ name: '湖北', value: 7 }, { name: '沈阳' }],
            [{ name: '湖南', value: 1 }, { name: '沈阳' }],
            [{ name: '浙江', value: 3 }, { name: '沈阳' }],
            [{ name: '安徽', value: 8 }, { name: '沈阳' }],
            [{ name: '黑龙江', value: 7 }, { name: '沈阳' }],
        ],
    };

    // 辽宁地图模块

    var datemap = cyfztx_date_n.geoCoordMap;
    var datevalue = cyfztx_date_n.BJData;
    var convertData = function (datemap, datevalue) {
        var res = [];
        for (var i = 0; i < datevalue.length; i++) {
            var dataItem = datevalue[i];
            var fromCoord = datemap[dataItem[0].name];
            var toCoord = datemap[dataItem[1].name];
            if (fromCoord && toCoord) {
                res.push([
                    {
                        coord: fromCoord,
                        value: dataItem[0].value,
                    },
                    {
                        coord: toCoord,
                    },
                ]);
            }
        }
        return res;
    };
    var convertData2 = function (datemap, datevalue) {
        var res = [];
        for (var i = 0; i < datevalue.length; i++) {
            var dataItem = datevalue[i];
            var fromCoord = datemap[dataItem[1].name];
            var toCoord = datemap[dataItem[0].name];
            if (fromCoord && toCoord) {
                res.push([
                    {
                        coord: fromCoord,
                        value: dataItem[0].value,
                    },
                    {
                        coord: toCoord,
                    },
                ]);
            }
        }
        return res;
    };

    var series = [];
    [['沈阳', datemap, datevalue]].forEach(function (item, i) {
        series.push(
            {
                name: '进口',
                type: 'lines',
                zlevel: 2,
                effect: {
                    show: true,
                    color: '#0bc7f3',
                    period: 4, //箭头指向速度，值越小速度越快
                    trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: 'arrow', //箭头图标
                    symbolSize: 5, //图标大小
                },
                lineStyle: {
                    normal: {
                        color: '#0bc7f3',
                        width: 1, //尾迹线条宽度
                        opacity: 0, //尾迹线条透明度
                        curveness: 0.3, //尾迹线条曲直度
                    },
                },
                data: convertData(item[1], item[2]),
            },
            {
                name: '出口',
                type: 'lines',
                zlevel: 2,
                effect: {
                    show: true,
                    color: '#FF0000',
                    period: 4, //箭头指向速度，值越小速度越快
                    trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: 'arrow', //箭头图标
                    symbolSize: 5, //图标大小
                },
                lineStyle: {
                    normal: {
                        color: '#FF0000',
                        width: 1, //尾迹线条宽度
                        opacity: 0, //尾迹线条透明度
                        curveness: -0.3, //尾迹线条曲直度
                    },
                },
                data: convertData2(item[1], item[2]),
            },
            {
                //城市坐标点动画
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    //涟漪特效
                    period: 4, //动画时间，值越小速度越快
                    brushType: 'stroke', //波纹绘制方式 stroke, fill
                    scale: 4, //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right', //显示位置
                        offset: [5, 0], //偏移设置
                        formatter: '{b}', //圆环显示文字
                    },
                    emphasis: {
                        show: true,
                        color: '#FF6A6A',
                    },
                },
                symbol: 'circle',
                symbolSize: function (val) {
                    return 8 + val[2] / 1000; //圆环大小
                },
                itemStyle: {
                    normal: {
                        show: true,
                    },
                    emphasis: {
                        show: true,
                        color: '#FF6A6A',
                    },
                },
                data: item[2].map(function (dataItem) {
                    return {
                        name: dataItem[0].name,
                        value: datemap[dataItem[0].name].concat([dataItem[0].value]),
                    };
                }),
            },
            //进口点
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    period: 4,
                    brushType: 'stroke',
                    scale: 4,
                },
                label: {
                    normal: {
                        show: true,
                        color: 'red',
                        position: 'right',
                        formatter: '{b}',
                    },
                    emphasis: {
                        show: true,
                        color: '#FF6A6A',
                    },
                },
                symbol: 'pin',
                symbolSize: 30,
                itemStyle: {
                    normal: {
                        show: true,
                        color: 'red',
                    },
                    emphasis: {
                        show: true,
                        color: '#FF6A6A',
                    },
                },
                data: [
                    {
                        name: item[0],
                        value: datemap[item[0]].concat([100]),
                        visualMap: false,
                    },
                ],
            }
        );
    });
    var svg = 'path://M32.597,9.782 L30.475,11.904 C30.085,12.294 29.452,12.294 29.061,11.904 C28.671,11.513 28.671,10.880 29.061,10.489 L31.182,8.368 C31.573,7.978 32.206,7.978 32.597,8.368 C32.987,8.759 32.987,9.392 32.597,9.782 ZM30.000,30.500 C30.000,31.328 29.329,32.000 28.500,32.000 L5.500,32.000 C4.672,32.000 4.000,31.328 4.000,30.500 C4.000,29.672 4.672,29.000 5.500,29.000 L8.009,29.000 L8.009,18.244 C8.009,13.139 12.034,9.000 17.000,9.000 C21.966,9.000 25.992,13.139 25.992,18.244 L25.992,29.000 L28.500,29.000 C29.329,29.000 30.000,29.672 30.000,30.500 ZM17.867,14.444 L13.000,22.000 L17.000,22.000 L17.133,26.556 L21.000,20.000 L17.000,20.000 L17.867,14.444 ZM25.221,6.327 C25.033,6.846 24.459,7.113 23.940,6.924 C23.421,6.735 23.153,6.162 23.342,5.643 L24.368,2.823 C24.557,2.304 25.131,2.037 25.650,2.226 C26.169,2.415 26.436,2.989 26.248,3.508 L25.221,6.327 ZM17.000,5.000 C16.448,5.000 16.000,4.552 16.000,4.000 L16.000,1.000 C16.000,0.448 16.448,0.000 17.000,0.000 C17.552,0.000 18.000,0.448 18.000,1.000 L18.000,4.000 C18.000,4.552 17.552,5.000 17.000,5.000 ZM10.028,7.197 C9.509,7.386 8.935,7.118 8.746,6.599 L7.720,3.780 C7.532,3.261 7.799,2.687 8.318,2.498 C8.837,2.309 9.411,2.577 9.600,3.096 L10.626,5.915 C10.815,6.434 10.547,7.008 10.028,7.197 ZM3.354,12.268 L1.232,10.146 C0.842,9.756 0.842,9.123 1.232,8.732 C1.623,8.342 2.256,8.342 2.646,8.732 L4.768,10.854 C5.158,11.244 5.158,11.877 4.768,12.268 C4.377,12.658 3.744,12.658 3.354,12.268 Z';

    var option = {
        // backgroundColor:'red',
        visualMap: {
            //图例值控制
            show: false,
            type: 'piecewise',
            pieces: [
                {
                    max: 8,
                    color: '#e67817',
                },
                {
                    min: 5,
                    max: 10,
                    color: 'red',
                },
                {
                    min: 10,
                    color: 'yellow',
                },
            ],
            calculable: false,
        },
        geo: {
            map: 'china',
            show: true,
            label: {
                color:"#fff"
            },
            roam: true, //是否允许缩放
            layoutCenter: ['50%', '50%'], //地图位置
            layoutSize: '120%',
            itemStyle: {
                normal: {
                    show: 'true',
                    color: 'rgba(13, 39, 114,.5)', //地图背景色
                    borderColor: '#5bc1c9', //省市边界线
                },
                emphasis: {
                    show: 'true',
                    color:'rgb(86, 208, 227)'
                },
            },
        },
        series: series,
    };

    myChart.setOption(option)

})();



// window.addEventListener("resize", function () {
//     myChart.resize();
// });